<!--{template common/header_simple_start}-->
<link href="static/css/common.css?{VERHASH}" rel="stylesheet" media="all">
<link href="dzz/connect/images/connect.css?{VERHASH}" rel="stylesheet" media="all">
<script type="text/javascript" src="static/js/jquery.leftDrager.js?{VERHASH}"></script>
<style>
html,  body {
	overflow: hidden;
	background: #FBFBFB;
}
.bs-left-container {
	width: 120px;
}
.bs-main-container {
	margin-left: 120px;
	overflow: auto;
}
</style>
<!--{template common/header_simple_end}-->
<div class="bs-container clearfix">
  <div class="bs-left-container  clearfix"> 
    <!--{template left}--> 
  </div>
  <div class="left-drager">
    <div class="left-drager-op">
      <div class="left-drager-sub"></div>
    </div>
  </div>
  <div class="bs-main-container  clearfix">
    <div class="main-header clearfix">
      <ul class="nav nav-pills nav-pills-bottomguide">
        <li> <a href="{BASESCRIPT}?mod=cloud&op=edit&bz=dzz"> {lang set}</a> </li>
        <li> <a href="{BASESCRIPT}?mod=cloud&op=space">{lang space_management}</a> </li>
        <li class="active"> <a href="{BASESCRIPT}?mod=cloud&op=oauth&bz=JSS">{lang oauth_JSS_add_JD}</a> </li>
      </ul>
    </div>
    <div class="main-content clearfix" style="border-top:1px solid #FFF">
      <div style="padding:15px;">
        <h4 style="margin-bottom:20px">{lang set}accessKey {lang and} secretKey</h4>
        <form name="aliform" class="form-horizontal form-horizontal-left" action="{BASESCRIPT}?mod=cloud&op=oauth" method="post" onsubmit="return validate(this)">
          <input type="hidden" name="jsssubmit" value="true" />
          <input type="hidden" name="bz" value="JSS" />
          <input type="hidden" name="formhash" value="{FORMHASH}" />
          <div class="form-group">
            <label class="control-label" for="email">accessKey</label>
            <div class="controls">
              <input type="text" id="access_id" class="form-control" name="access_id" autocomplete="off" value="$ali[access_id]" onblur="if(this.value==''){jQuery(this).block().parent().addClass('warning');}else{jQuery(this).parent().parent().removeClass('warning');getBucket();}">
            </div>
            <span class="help-block">{lang oauth_JSS_JD_storage}accessKey</span> </div>
          <div class="form-group">
            <label class="control-label" for="email">secretKey</label>
            <div class="controls">
              <input type="password" class="form-control" id="access_key" name="access_key" autocomplete="off" value="$ali[access_id]" onblur="if(this.value==''){jQuery(this).parent().parent().addClass('warning');}else{jQuery(this).parent().parent().removeClass('warning');getBucket();}">
            </div>
            <span class="help-block">{lang oauth_JSS_JD_storage}secretKey</span> </div>
          <div class="form-group">
            <label class="control-label"><a href="javascript:;" onclick="getBucket()">{lang oauth_ALIOSS_click_gain}</a></label>
            <div class="controls">
              <select id="bucket" name="bucket" class="form-control" onchange="if(this.value==''){jQuery(this).parent().parent().addClass('warning')}else{jQuery(this).parent().parent().removeClass('warning')}">
                <option value="">{lang select}bucket</option>
              </select>
            </div>
            <span class="help-block">{lang oauth_JSS_bucket}</span> </div>
          <div class="form-group">
            <label class="control-label"></label>
            <div class="controls">
              <input type="submit" class="btn btn-primary" value="{lang add}">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
	jQuery('.left-drager').leftDrager_layout();

	function getBucket() {
		var id = jQuery("#access_id").val();
		var key = jQuery("#access_key").val();
		if(id == '' || key == '') {
			return;
		}
		jQuery.getJSON('{BASESCRIPT}?mod=cloud&op=oauth&do=getBucket', { id: id, key: key, bz: 'JSS' }, function(json) {
			if(json.length > 0) {
				var html = '<option value="" >{lang select}bucket</option>';
				for(var i in json) {
					html += '<option value="' + json[i] + '" >' + json[i] + '</option>';
				}
				jQuery('#bucket').html(html);
				jQuery('#bucket').parent().parent().find('.control-label').html('<span class="text-success">{lang oauth_JSS_bucket_success}</span>');
			}
		});

	}

	function validate(form) {
		if(jQuery("#access_id").val() == '') {
			jQuery("#access_id").parent().parent().addClass('warning');
			return false;
		} else if(jQuery("#access_key").val() == '') {
			jQuery("#access_key").parent().parent().addClass('warning');
			return false;
		} else if(jQuery("#bucket").val() == '') {
			jQuery("#bucket").parent().parent().addClass('warning');
			return false;
		}
		return true;
	}
	jQuery(document).ready(function(e) {

	});
</script> 
<!--{template common/footer_simple}-->